<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据展示</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="label-group-table"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade in" id="ticketModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 500px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ticketModelLabel"></h4>
            </div>
            <div class="modal-body" style="height: 300px">
                <div class="input-group">
                    <input value="" type="text" placeholder="输入关键词" class="input-sm form-control" id="search-ticket">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-sm btn-primary" id="search-ticket-btn"> 搜索</button>
                    </span>
                </div>
                <table class="table">
                    <thead style="display:table;width:100%;table-layout:fixed;">
                    <tr>
                        <th style="width: 20%;">LOGO</th>
                        <th style="width: 35%;">券名称</th>
                        <th style="width: 10%;">总量</th>
                        <th style="width: 15%;">类型</th>
                        <th style="width: 20%;">操作</th>
                    </tr>
                    </thead>
                    <tbody style="display:block;height:200px;overflow-y:auto;width: 100%;text-align: center" id="inner">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script th:inline="javascript">
    let table;

    let id =  [[${recordId}]],groupId=[[${groupId}]];

    init_data();

    function init_data() {
        $.ajax({
            type:"post",
            url:ipDomain + '/quanquan-user/labelGroup/synRecordDetail',
            data:{
                groupId:groupId,
                id:id
            },
            dataType:"json",
            success:function (res) {
                if(res.resCode == 0){
                    var data = res.data.list;
                    var count = res.data.total;
                    loadTable(data,count);
                }else{

                }
            }
        });
    }

    function loadTable(data,count) {
        layui.use('table', function () {
            table = layui.table;
            table.render({
                id: 'label-group-table',
                elem: '#label-group-table',
                height: 800,
                skin: 'line',
                size: 'sm',
                cellMinWidth: 120,
                cols: [
                        [
                        {field: 'userId', title: '用户ID',  sort: true, fixed: 'left'},
                        {field: 'phone', title: '手机号', sort: true,  fixed: 'left'},
                        {field: 'name', title: '姓名', sort: true,  fixed: 'left'},
                        {field: 'gender', title: '性别', sort: true, fixed: 'left'},
                        {field: 'age', title: '年龄', sort: true, fixed: 'left'},
                        {field: 'birthday', title: '生日', sort: true, fixed: 'left'},
                        {field: 'createTime', title: '注册时间', sort: true, fixed: 'left'},
                    ]
                ],
                data:data,
                page:{
                    layout: ['limit', 'count', 'first','prev', 'page', 'next','last','skip'],
                    groups:3,
                    first:"首页",
                    last:"尾页",
                    limit:20,
                    limits:[20,40,60,80,100]
                }
            });
        });
    }

    function exportData(groupId,id) {
        window.location.href = ipDomain + "/quanquan-user/labelGroup/exportData?groupId="+groupId+"&id="+id;
    }

    function viewDetails(groupId,id) {

    }


    function remove(id) {
        if (id == null) {
            layer.msg('Id不能为空', {icon: 11, time: 1000, shade: [0.5, '#000', true]});
        }
        $.get(ipDomain + '/quanquan-user/labelGroup/remove/' + id,
            (res) => {
                if (res.resCode == 0) {
                    layer.msg('删除成功', {icon: 1, time: 500, shade: [0.5, '#000', true]});
                } else {
                    layer.msg(res.resMsg, {icon: 11, time: 1000, shade: [0.5, '#000', true]});
                }
            }
        );
    }

</script>
</html>